<!--
 * @Date: 2024-09-13 13:35:26
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-20 13:36:42
 * @Description: 
-->
<template>
  <el-popover :='popoverAttrs'>
    <template #reference>
      <el-input class="input-icon" ref="inputRef" :="inputAttrs" v-model="iconState.fontIconClass">
        <template #append>
          <div class="input-icon-picker">
            <div class="input-icon-picker__trigger">
              <span class="input-icon-picker__icon">
                <template v-if="iconState.fontIconClass">
                  <RkIcon :name="iconState.fontIconClass"></RkIcon>
                </template>
                <template v-else>
                  <RkIcon name="ele-Pointer"></RkIcon>
                </template>
              </span>
            </div>
          </div>
        </template>
      </el-input>
    </template>
    <template #default>
      <Sheets :activeClass="iconState.fontIconClass" @on-seleted="sheetOnSeleted"/>
    </template>
  </el-popover>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import Sheets from './sheets.vue'

const emits = defineEmits(['update:modelValue', 'clear']);

const props = defineProps({
  // 是否禁用
  disabled: { type: Boolean, default: false },
  // 是否可清空
  clearable: { type: Boolean, default: true },
  // 动态绑定字段
  modelValue: { type: String },
  // 占位内容
  placeholder: { type: String, default: '请选择图标' },
  // 弹出面板宽度
  popoverWidth: { type: [Number], default: 350 },
  // 弹出面板宽度自适应
  popoverAutoWidth: { type: Boolean, default: true }
})

const iconState = reactive({
  fontIconClass: ''
})

// 输入框Ref
const inputRef = ref(null)
// 输入框属性
const inputAttrs = reactive({
  disabled: props.disabled,
  clearable: props.clearable,
  placeholder: props.placeholder,
})

// 气泡卡片属性
const popoverAttrs = reactive({
  width: props.popoverWidth,
  trigger: 'click',
  disabled: props.disabled,
  placement: 'bottom',
  persistent: false,
  popperClass: 'icon-selector-popper',
})
/**
 * 设置气泡卡片宽度
 */
const setPopoverWidth = () => {
  if (!props.popoverAutoWidth) return
  nextTick(() => {
    let inputWidth = inputRef.value.$el.offsetWidth
		popoverAttrs.width = (inputWidth > props.popoverWidth) ? inputWidth : props.popoverWidth;
	});
}
/**
 * 监听数据对外赋值 v-model
 */
watch(
  () => iconState.fontIconClass,
  (nv) => {
    emits('update:modelValue', nv)
  },
  { deep: false, immediate: false }
)
/**
 * 监听传入数据，对内赋值
 */
watch(
  () => props.modelValue,
  (nv) => {
    iconState.fontIconClass = nv
  },
  { deep: false, immediate: true }
)

onMounted(() => {
  setPopoverWidth()
})

/**
 * 图标弹出面板选中
 * 
 * @param value 选择的值
 * @param item 选择的数据项
 */
const sheetOnSeleted = (value, item) => {
  iconState.fontIconClass = value
}

</script>

<style lang="scss" scoped>
.input-icon-picker {
  display: inline-block;
  line-height: normal;
  outline: none;
  position: relative;
  &__trigger {
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-size: 0;
    height: 32px;
    justify-content: center;
    padding: 4px;
    position: relative;
    width: 32px;
  }
  &__icon {
    border-radius: var(--el-border-radius-small);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    text-align: center;
    width: 100%;
  }
}
.input-icon-append {
  width: 32px;
  height: 32px;
}
</style>
<style lang="scss">
.input-icon {
  .el-input-group__append {
    padding: 0;
  }
}
.icon-selector-popper {
  padding: 0 !important;
}
</style>